<!doctype html>
<html lang="en" class="fixed">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>选择课程</title>
    <link rel="apple-touch-icon" sizes="120x120" href="favicon/apple-icon-120x120.png">
    <link rel="icon" type="image/png" sizes="192x192" href="favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="stylesheet" type="text/css"
          href="<?php xcho(loadSource('/assets/plugins/bootstrap/css/bootstrap.min.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/animate.css/animate.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/font-awesome/css/font-awesome.css')) ?>">
    <link rel="stylesheet"
          href="<?php xcho(loadSource('/assets/plugins/data-table/media/css/dataTables.bootstrap.min.css')) ?>">
    <!--    <link rel="stylesheet" href="--><?php //xcho(loadSource('/assets/plugins/ztree/css/zTreeStyle/zTreeStyle.css')) ?><!--">-->
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/layui/css/layui.css')) ?>" media="all">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/ztree/css/zTreeStyle/zTreeStyle.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/plugins/ztree/css/metroStyle/metroStyle.css')) ?>" type="text/css">
    <link rel="stylesheet" href="<?php xcho(loadSource('/app/css/style.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/app/css/app.css')) ?>">
    <link rel="stylesheet" href="<?php xcho(loadSource('/assets/css/new_main.css')) ?>">
    
    <style>

        *{
            margin: :0;
            padding: 0;
            box-sizing: border-box;
        }
        ul,li,ol,li{
            list-style: none;
        }
        body{
            background: #f4f4f4;
        }
        .course-content-title{
            width: 1200px;
            padding: 10px 20px;
            background: #fff;
            margin: 0 auto;
        }
        .course-content-title .title{
            border-bottom: 1px #ccc solid;
            font-size: 0;
        }
        .course-content-title .title p{
            width: 60px;
            text-align: center;
            font-size: 14px;
            color:#108EE9;
            display: inline-block;
            position: relative;
        }
        .course-content-title .title p i{
            width: 70px;
            display: inline-block;
            border-bottom: 2px #108EE9 solid;
            position: absolute;
            bottom:-11px;
            left: 0;
        }
        .course-content-title .title ul{
            font-size: 0;
            display: inline-block;
            float: right;
        }
        .course-content-title .title ul li{
            font-size: 12px;
            display: inline-block;
            margin: 0 8px;
            padding: 4px 10px;
            background: #1ab394;
            border-radius: 5px;
            color:#fff;
            cursor: pointer;
        }
        .course-content-title .title ul li:hover{
            background: #1ab394;
        }
        .course-content-title h2{
            font-size: 18px;
            padding-bottom: 10px;
            border-bottom: 1px #ccc solid;
        }
        .course-content-title .range{
            margin-top: 10px;
        }
        .course-content-title .range p{
            display: inline-block;
            margin-right: 10px;
            font-size: 12px;
        }
        .course-content-title .range select{
            width: 80px;
            margin-right: 10px;
            height: 24px;
            border: 1px #ccc solid;
            font-size: 10px;
            color:#333;
            border-radius: 5px;
        }
        .course-content-title .range select option{
            font-size: 10px;
        }
        .course-content-title .range input{
            margin-right: 10px;
            width: 110px;
            height:24px;
            border-radius: 5px;
            border: none;
            border:1px #ccc solid;
        }
        .course-content-title .canal{
            margin-top: 5px;
        }
        .course-content-title .next input{
            width: 240px;
            height: 30px;
            border-radius: 6px;
            border: none;
            border: 1px #ccc solid;
            outline: none;
            font-size: 10px;
            text-indent: 10px;
        }
        .course-content-title .next button{
            padding: 2px 16px;
            background: #1ab394;
            color:#fff;
            border: none;
            border-radius: 6px;
            font-size: 12px;
        }
        .course-content-title .next button:hover{
            background: #1ab394;
        }
        .course-content-cont{
            width: 1200px;
            padding: 20px 20px 30px;
            background: #fff;
            margin: 30px auto;
        }
        .course-content-cont .top_pages{
            padding: 3px 15px;
            height: 30px;
            margin-top: 8px;
            font-size: 0;
        }
        .course-content-cont .top_pages p{
            display: inline-block;
            font-size: 12px;
        }
        .course-content-cont .top_pages ul{
            font-size: 0;
            display: inline-block;
            float: right;
        }
        .course-content-cont .top_pages ul li:nth-of-type(1){
            width: 120px;
            border:none;
            background: none;
        }
        .course-content-cont .top_pages ul li:nth-of-type(1):hover{
            background: none;
            color:#999;
        }
        .course-content-cont .top_pages ul li{
            display: inline-block;
            font-size: 12px;
            width: 24px;
            height: 24px;
            background: #fff;
            margin-left: 10px;
            line-height: 24px;
            text-align: center;
            border: 1px #ccc solid;
            border-radius: 6px;
            cursor: pointer;
            color:#999;
        }
        .course-content-cont .top_pages ul li:last-child{
            width: 120px;
            border:none;
            background: none;
        }
        .course-content-cont .top_pages ul li:last-child input{
            width: 50px;
            margin: 0 10px;
            border-radius: 6px;
            border: none;
            border:1px #ccc solid;
            outline: none;
        }
        .course-content-cont .top_pages ul li:last-child:hover{
            background: none;
            color:#999;
        }
        .course-content-cont .top_pages ul li:hover{
            background: #108EE9;
            color:#fff;
        }
        .course-content-cont .table{
            width: 100%;
            margin-top: 10px;
        }
        .course-content-cont .table table{
            width: 100%;
        }
        .course-content-cont .table table thead tr th{
            padding: 10px;
            background: #1ab394;
            color:#fff;
            text-align: center;
        }
        .course-content-cont .table table thead tr th:nth-of-type(1) span{
            display: inline-block;
            width: 12px;
            height: 12px;
            border:1px #888 solid;
            background: #fff;
            margin-right: 20px;
            position: relative;
            cursor: pointer;
        }
        .course-content-cont .table table thead tr th:nth-of-type(1) span b{
            position: absolute;
            left: 28%;
            top:-60%;
        }
        .course-content-cont .table table tbody tr{
            border-bottom: 1px #ccc solid;
        }
        .course-content-cont .table table tbody tr:nth-of-type(even){
            background: rgba(238,238,238,.5);
        }
        .course-content-cont .table table tbody tr td{
            padding: 8px;
            border-bottom: 1px #eee solid;
            text-align: center;
        }
        .course-content-cont .table table tbody tr td:nth-of-type(1){
            color:#108EE9;
        }
        .course-content-cont .table table tbody tr td:last-child span{
            margin: 0 5px;
            color:#777;
            position: relative;
            cursor: pointer;
        }
        .course-content-cont .table table tbody tr td:last-child span b{
            width: 40px;
            line-height: 24px;
            background: #fff;
            position: absolute;
            bottom: -25px;
            left: -15px;
            font-weight: normal;
            font-size: 10px;
            color:#000;
            border: 1px #ccc solid;
            border-radius: 5px;
            display: none;
        }
        .course-content-cont .bottom_pages{
            padding: 3px 15px;
            height: 30px;
            margin-top: 8px;
            background: #fff;
            font-size: 0;
        }
    </style>
</head>

<body><?php include_once TPL_PATH . 'public/nav.phtml'; ?>
<div class="course-content" style="margin: 0;background: #ececec">
    <div class="course-content-title">
        <h2>选择课程</h2>
        <div class="range">
            <p>科目：</p>
            <select name="" id="">
                <option value="">全部</option>
                <option value="">全部</option>
            </select>
            <p>教材版本：</p>
            <select name="" id="">
                <option value="">全部</option>
            </select>
            <p>年级：</p>
            <select name="" id="">
                <option value="">全部</option>
            </select>
            <p>课程年份：</p>
            <select name="" id="">
                <option value="">全部</option>
            </select>
            <p>课程周期：</p>
            <select name="" id="">
                <option value="">全部</option>
            </select>
        </div>
        <div class="range next">
            <p>搜索：</p>
            <input type="text" placeholder="可搜索学员名">
            <button>确认</button>
        </div>
    </div>
    <div class="course-content-cont">
        <div class="top_pages">
            <ul>
                <li>共搜索到 922 条数据</li>
                <li class="glyphicon glyphicon-menu-left"></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li class="glyphicon glyphicon-menu-right"></li>
                <li>跳至<input type="text">页</li>
            </ul>
        </div>
        <div class="table">
            <table>
                <thead>
                <tr>
                    <th>课程名称</th>
                    <th>课目</th>
                    <th>年级</th>
                    <th>教材版本</th>
                    <th>课程周期</th>
                    <th>课程年份</th>
                    <th>价格</th>
                    <th>官网课程名</th>
                    <th>总小时</th>
                    <th>课程后台ID</th>
                    <th>官网课程ID</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>正式-同步-17夏-常规-英-6-沪教</td>
                    <td>英语</td>
                    <td>六年级</td>
                    <td>沪教版</td>
                    <td>暑假课</td>
                    <td>2017</td>
                    <td>11999</td>
                    <td>【英语】六年级暑假课沪教版</td>
                    <td>22.5</td>
                    <td>173</td>
                    <td>286</td>
                </tr>
                <tr>
                    <td>正式-同步-17夏-常规-英-6-沪教</td>
                    <td>英语</td>
                    <td>六年级</td>
                    <td>沪教版</td>
                    <td>暑假课</td>
                    <td>2017</td>
                    <td>11999</td>
                    <td>【英语】六年级暑假课沪教版</td>
                    <td>22.5</td>
                    <td>173</td>
                    <td>286</td>
                </tr>
                <tr>
                    <td>正式-同步-17夏-常规-英-6-沪教</td>
                    <td>英语</td>
                    <td>六年级</td>
                    <td>沪教版</td>
                    <td>暑假课</td>
                    <td>2017</td>
                    <td>11999</td>
                    <td>【英语】六年级暑假课沪教版</td>
                    <td>22.5</td>
                    <td>173</td>
                    <td>286</td>
                </tr>
                <tr>
                    <td>正式-同步-17夏-常规-英-6-沪教</td>
                    <td>英语</td>
                    <td>六年级</td>
                    <td>沪教版</td>
                    <td>暑假课</td>
                    <td>2017</td>
                    <td>11999</td>
                    <td>【英语】六年级暑假课沪教版</td>
                    <td>22.5</td>
                    <td>173</td>
                    <td>286</td>
                </tr>
                <tr>
                    <td>正式-同步-17夏-常规-英-6-沪教</td>
                    <td>英语</td>
                    <td>六年级</td>
                    <td>沪教版</td>
                    <td>暑假课</td>
                    <td>2017</td>
                    <td>11999</td>
                    <td>【英语】六年级暑假课沪教版</td>
                    <td>22.5</td>
                    <td>173</td>
                    <td>286</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="top_pages bottom_pages">
            <ul>
                <li>共搜索到 922 条数据</li>
                <li class="glyphicon glyphicon-menu-left"></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li class="glyphicon glyphicon-menu-right"></li>
                <li>跳至<input type="text">页</li>
            </ul>
        </div>
    </div>
</div>
</div>
</div>
<script src="<?php xcho(loadSource('/assets/plugins/jquery/jquery.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/bootstrap/js/bootstrap.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/layui/layui.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/media/js/jquery.dataTables.min.js')) ?>"></script>
<script src="<?php xcho(loadSource('/assets/plugins/data-table/media/js/dataTables.bootstrap.min.js')) ?>"></script>
<script
    src="<?php xcho(loadSource('/assets/plugins/data-table/extensions/Responsive/js/dataTables.responsive.min.js')) ?>"></script>
<script
    src="<?php xcho(loadSource('/assets/plugins/data-table/extensions/Responsive/js/responsive.bootstrap.min.js')) ?>"></script>
<script>
    $(".top_more").hover(function(){
        $(this).find("ul").show();
    },function(){
        $(this).find("ul").hide();
    })
    $("table tr>td>span").hover(function(){
        $(this).find("b").show();
    },function(){
        $(this).find("b").hide();
    })
</script>
<?php include_once TPL_PATH . 'public/foot_script.phtml'; ?>
<button id="top" style="height: 50px;width: 50px;"></button></body>

</html>
